'use client'
import React, { ReactNode } from 'react'
import { signIn, signOut } from "@/actions";
import {
  Avatar,
  Button,
  NavbarItem,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Spinner, 
} from "@heroui/react";
import { useSession } from 'next-auth/react';
// import Snipper from './snipper';

export default function HeaderAuth() {
  const {data:session,status} = useSession()
   let authContent: ReactNode;
   if(status === 'loading'){
    return  <Spinner className="w-6 h-6" size="sm" color="secondary" />
   }else if (session?.user) {
    authContent = (
      <Popover placement="bottom">
        <PopoverTrigger>
          <Avatar src={session?.user?.image || "https://i.pravatar.cc/150?u=a042581f4e29026024d"} />
        </PopoverTrigger>
        <PopoverContent>
          <form action={signOut} className="p-4">
            <Button type="submit">Sign Out</Button>
          </form>
        </PopoverContent>
      </Popover>
    );
  } else {
    authContent = (
      <>
        <NavbarItem>
          <form action={signIn}>
            <Button type="submit" color="secondary" variant="bordered">
              Sign In
            </Button>
          </form>
        </NavbarItem>
        <NavbarItem>
          <form action={signIn}>
            <Button type="submit" color="secondary">
              Sign Up
            </Button>
          </form>
        </NavbarItem>
      </>
    );
  }
  return authContent
}
